.img-container {
    display: flex; /* Añade flexbox para centrar el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    margin: 0 auto; /* Asegura que esté centrado */
    width: 100%; /* Usa todo el ancho disponible */
    max-width: 300px; /* Limita el ancho máximo de la imagen */
    padding: 10px; /* Espaciado interno */
}

.responsive-img {
    max-width: 90%; /* Limita la imagen al 90% del ancho disponible */
    max-height: 90vh; /* Limita la imagen al 90% de la altura de la pantalla */
    height: auto; /* Mantiene la proporción de la imagen */
    border: 5px solid rgba(0, 0, 0, 0.2); /* Borde opcional */
    border-radius: 10px; /* Bordes redondeados */
}

.sipnosis {
    color: #e7ad60;
    z-index: 999999999;
    width: 50%;
    text-align: justify;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo negro semitransparente */
    padding: 20px;                       /* Espacio alrededor del texto */
    border-radius: 10px;                 /* Bordes redondeados */
}


video{
    border: outset rgb(187, 128, 18);
    max-width: 90%; /* El video no ocupará más del 90% del ancho de la pantalla */
    max-height: 90vh; /* El video no ocupará más del 90% de la altura de la pantalla */
    margin: auto; /* Centra el video */
    display: block; /* Asegura que el margen automático funcione */
    border: 10px solid rgba(0, 0, 0, 0.5); /* Opcional: añade un borde al video */
    box-sizing: border-box; /* Incluye el borde dentro del tamaño total */
}
@media (max-width: 768px) {
    .img-container {
        max-width: 100%; /* Ocupa el 90% del ancho en pantallas pequeñas */
        padding: 5px; /* Reduce el espaciado interno */
    }
    video {
        max-width: 80%; /* Ajusta el tamaño máximo en pantallas pequeñas */
        max-height: 80vh; /* Ajusta el tamaño máximo en pantallas pequeñas */
    }
    .sipnosis {
        color: #e7ad60;
        z-index: 999999999;
        width: 50%;
        text-align: justify;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.7); /* Fondo negro semitransparente */
        padding: 20px;                       /* Espacio alrededor del texto */
        border-radius: 10px;                 /* Bordes redondeados */
    }
    img{max-width: 80%; /* Ajusta el tamaño para pantallas medianas */
        max-height: 80vh;}
    
}

@media (max-width: 480px) {
    .img-container {
        max-width: 100%; /* Ocupa el 90% del ancho en pantallas pequeñas */
        padding: 5px; /* Reduce el espaciado interno */
    }
    video {
        max-width: 80%; /* Ajusta el tamaño máximo en pantallas pequeñas */
        max-height: 80vh; /* Ajusta el tamaño máximo en pantallas pequeñas */
    }
    .sipnosis {
        color: #e7ad60;
        z-index: 999999999;
        width: 50%;
        text-align: justify;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.7); /* Fondo negro semitransparente */
        padding: 20px;                       /* Espacio alrededor del texto */
        border-radius: 10px;                 /* Bordes redondeados */
    }
    img{max-width: 80%; /* Ajusta el tamaño para pantallas medianas */
        max-height: 80vh;}
    
}